<template>
  <PageContainer>
    <Header title="新建圈子" />
    <view>
      <TmForm
        layout="vertical"
        :padding="[0, 0]"
        @submit="handleSubmit"
        :transparent="true"
        :border="false"
        v-model="formData"
      >
        <view class="hb-bg-white hb-pt-3 hb-pb-1 hb-px-4 hb-box-shadow-base hb-rounded-xl hb-mb-4">
          <TmFormItem
            label="圈子名称"
            :show-top-error-gap="false"
            required
            :margin="[0, 0]"
            :padding="[0, 0]"
            :transparent="true"
            :rules="[{ required: true, message: '请输入圈子名称' }]"
            field="name"
          >
            <TmInput
              v-model="formData.name"
              :font-size="28"
              show-char-number
              :maxlength="20"
              placeholder="请输入圈子名称"
            />
          </TmFormItem>
        </view>
        <view class="hb-bg-white hb-pt-3 hb-pb-1 hb-px-4 hb-box-shadow-base hb-rounded-xl hb-mb-4">
          <TmFormItem
            label="圈子简介"
            :show-top-error-gap="false"
            :margin="[0, 0]"
            :padding="[0, 0]"
            :transparent="true"
            field="description"
          >
            <TmInput
              v-model="formData.description"
              :height="160"
              :font-size="28"
              :inputPadding="[16, 16]"
              placeholder="简单介绍一下圈子吧"
              type="textarea"
            />
          </TmFormItem>
        </view>
        <view class="hb-bg-white hb-pt-3 hb-pb-1 hb-px-4 hb-box-shadow-base hb-rounded-xl hb-mb-4">
          <TmFormItem
            label="圈子头像"
            :show-top-error-gap="false"
            required
            :margin="[0, 0]"
            :padding="[0, 0]"
            :transparent="true"
            :rules="[{ required: true, message: '请上传圈子头像' }]"
            field="avatar"
          >
            <ImgUpload
              v-model="uploadAvatar"
              :is-crop="true"
              :crop-options="{ width: 400, height: 400 }"
            />
          </TmFormItem>
        </view>
        <view class="hb-absolute hb-bottom-4 hb-left-0 hb-w-full hb-px-4">
          <TmButton
            :loading="submitLoading"
            label="一键创建"
            form-type="submit"
            :font-size="32"
            :round="16"
            block
            :height="88"
          />
        </view>
      </TmForm>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* createCircle 新建圈子 */
  import { addCircle } from '@/api/contact';
  import { useUserStore } from '@/store/modules/user';
  import { Toast } from '@/utils';

  const formData = reactive({
    name: '',
    description: '',
    avatar: '',
  });

  const uploadAvatar = computed({
    get() {
      return [formData.avatar];
    },
    set(value: string[]) {
      formData.avatar = value[0];
    },
  });

  const submitLoading = ref(false);
  /** 表单提交 */
  const handleSubmit = async (e: Tmui.tmFormSubmitResult<typeof formData>) => {
    if (!e.isPass) return;
    submitLoading.value = true;
    try {
      const uuid = await addCircle({
        name: formData.name,
        description: formData.description,
        avatar: formData.avatar,
      });
      useUserStore().getUserInfo();
      Toast({
        title: '圈子创建成功！',
        success: () => {
          reLaunch({
            name: 'circleDetail',
            options: {
              uuid,
            },
          });
        },
      });
    } finally {
      submitLoading.value = false;
    }
  };
</script>

<style lang="scss" scoped></style>
